<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="format-detection" content="telephone=no"/>
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no"/>
    <title>我的订单</title>
    <link rel="stylesheet" href="../../js/mui/css/mui.min.css">
    <link rel="stylesheet" href="../../css/mui-app-style.css">
    <style>
        .order__item{
            background: #fff;
            border:1px solid #cccccc;
            margin:8px 5px;
            border-radius: 4px;
        }
        .order__item__title{
            padding:10px 10px;
            border-bottom:1px solid #ccc;
        }
        .order__item__status{
            color: #C06845;
        }
        .order__item__body{
            padding:10px;
        }
        .order__item__product{
            width: 80px;
            text-align: center;
            padding:5px 8px;
            border:1px solid #C06845;
        }
        .order__item__price{
            color: #C06845;
            padding-top:10px;
        }
        .order__item__date{
            padding:10px 10px;
            border-top:1px solid #ccc;
        }
        .gopay{
            display: inline-block;
            padding:0px 12px;
            border:1px solid #C06845;
            border-radius:2px;
            color: #C06845;
            position: absolute;
            right:0px;
        }
        .gopay:active{
            background: #ccc;
        }

    </style>
</head>
<body>
<header class="mui-bar mui-bar-nav">
    <a class="mui-action-back mui-icon mui-icon-back mui-pull-left"></a>
    <h1 class="mui-title"><!--我的订单--></h1>
</header>
<div class="mui-content" id="order">
    <div class="order__item" v-for="(item,index) of listdata">
        <div class="mui-row order__item__title">
            <div class="mui-col-xs-8 " >订单编号：{{item.order}}</div>
            <div class="mui-col-xs-4 mui-text-right">
                <span class="order__item__status ">{{item.status}}</span>
            </div>
        </div>
        <div class="mui-row order__item__body">
            <div class="mui-col-xs-3">
                <div class="order__item__product">
                    <img src="../../images/v_product.png" width="50" alt="">
                </div>
            </div>
            <div class="mui-col-xs-9">
                <div class="order__item__name">{{item.product}}</div>
                <div class="order__item__price">￥{{item.price}}</div>
            </div>
        </div>
        <div class="mui-row order__item__date">
            <div class="mui-col-xs-9">订单日期：{{item.date}}</div>
            <div class="mui-col-xs-3 mui-text-right">
                <span class="gopay" @click="linkto(item)">去支付</span>
            </div>
        </div>
    </div>
</div>
<script src="../../js/vue.js"></script>
<script src="../../js/mui/js/mui.min.js"></script>
<script src="../../js/common/crypto-js.js"></script>
<script src="../../js/common/common.js"></script>
<script src="../../js/order/order.js"></script>
<script>
</script>
</body>
</html>